<template>
  <div>
    <div id="box" style="width:900px ;height:300px; opacity: .4;"></div>
    <div id="box1" style="width:900px ;height:300px; margin-left:-21.4%; margin-top:3.9%;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: 'App',
  data() {
    return {}
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getPie()
    })
  },
  methods: {
    getPie() {
      // 绘制图表
      var myChart = echarts.init(document.getElementById('box'))
      var myChart1 = echarts.init(document.getElementById('box1'))
      // 指定图表的配置项和数据
      var option = {

        stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: 'item',
          formatter: '{a}<br/>{b}:{c} ({d}%)'
        },
        //图例
        legend: {//图例  标注各种颜色代表的模块
          orient: 'vertical',//图例的显示方式  默认横向显示
          bottom: 10,//控制图例出现的距离  默认左上角
          left: 'center',//控制图例的位置
          // itemWidth: 16,//图例颜色块的宽度和高度
          // itemHeight: 12,
          textStyle: {//图例中文字的样式
            color: '#000',
            fontSize: 16
          },
          data: ['行业一', '行业二', '行业三', '行业四', '行业五']//图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: ['#F5C847', '#F36F8A', '#0089FF', '#4AC7F5', '#AF89D6'],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: 'pie',             //echarts图的类型   pie代表饼图
          radius: '35%',           //饼图中饼状部分的大小所占整个父元素的百分比
          center: ['40%', '50%'],  //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: [                  //每个模块的名字和值

            { name: '行业五', value: 19.23 },
            { name: '行业四', value: 28.57 },
            { name: '行业三', value: 38.46 },
            { name: '行业二', value: 7.14 },
            { name: '行业一', value: 6.6 },
          ],
          itemStyle: {
            normal: {
              label: {
                show: false,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
              }
            }
          },
        }

      }
      var option1 = {
            //标题
        title: {
          text: '行业分类',
          x: 'center',              //标题位置
          // textStyle: { //标题内容的样式
          //   color: '#000',
          //   fontStyle: 'normal',
          //   fontWeight: 100,
          //   fontSize: 16 //主题文字字体大小，默认为18px
          // },
        },
        color: ['#F5C847', '#F36F8A', '#0089FF', '#4AC7F5', '#AF89D6'],
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 19.23,
                name: '19.23%'
              },
              {
                value: 28.57,
                name: '28.57%'
              },
              {
                value: 38.46,
                name: '38.46%'
              },
               {
                value: 7.14,
                name: '7.14%'
              },
               {
                value: 6.6,
                name: '6.6%'
              }
            ],
            radius: ['40%', '70%'],
                   itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#091232',
              label: {
                show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
              }
            }
          },
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      myChart1.setOption(option1)
    }
  }

}

</script>

<style scoped>
</style>